<template>
    <div class="changePassword">
        <assets-head :title="$t('修改资金密码')" />
        <div class="line"></div>
        <div class="content">
            <ExInput :label="$t('新密码')" :placeholderText="$t('请输入密码')" :tips="$t('请输入6位数字')" v-model="password"
                typeText="password" />
            <ExInput :label="$t('确认新密码')" :placeholderText="$t('请输入密码')" :tips="$t('请输入6位数字')" v-model="rePassword"
                typeText="password" />
            <ExChecked class="mb-42" :list="list" @checked="onChecked"></ExChecked>
            <p class="label mt-14 textColor">{{ $t('验证码') }}</p>
            <div class="iptbox inputBackground">
                <input class="inputBackground textColor" type="text" :placeholder="$t('请输入验证码')" v-model="verifyCode">
                <span v-if="type != 3" @click="senCode">{{ $t('发送验证码') }}<template v-if="time"> ({{ time
                }})s</template></span>
            </div>
            <div class="btn" @click="submit">{{ $t('确定') }}</div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import ExInput from "@/components/ex-input";
import ExChecked from "@/components/ex-checked";
import Axios from "@/API/userCenter.js";
import ApiLogin from "@/API/login.js";
export default {
    props: {

    },
    components: {
        assetsHead,
        ExInput,
        ExChecked
    },
    data() {
        return {
            password: '', //密码
            rePassword: '',//确认密码
            verifcode_type: '',// 验证类型：1/手机；2/邮箱；3/谷歌验证器；
            verifyCode: '', //验证码
            type: 2, //默认选中邮箱
            list: [
                // {
                //     name: this.$t('手机验证'),
                //     type: 1
                // },
                {
                    name: this.$t('邮箱验证'),
                    type: 2
                },
                {
                    name: this.$t('谷歌验证'),
                    type: 3
                },
            ],
            email_authority: false, //是否绑定邮箱
            google_auth_bind: false,//是否绑定谷歌
            phone_authority: false,//是否绑定手机
            email: '',
            phone: '',
            google_auth_secret: '',
            account: '',
            timer: '',
            time: 0
        }
    },
    mounted() {
        this.getVerifTarget();
        clearInterval(this.timer)
    },
    methods: {
        onChecked(type) {
            this.type = type;
            if (this.type == 3 && !this.google_auth_bind) {
                this.$toast(this.$t('请绑定谷歌验证器'))
            }
            if (this.type == 1) {
                this.account = this.phone;
            } else if (this.type == 2) {
                this.account = this.email;
            } else if (this.type == 3) {
                this.account = this.google_auth_secret;
            }
        },
        submit() {
            if (this.password.length < 6) {
                this.$toast(this.$t('资金密码(6位数字)'))
                return false
            }
            if (this.password !== this.rePassword){
              this.$toast(this.$t('Fund password is inconsistent'))
              return false
            }
            Axios.setSafeword({
                safeword: this.password,
                verifcode_type: this.type,
                verifcode: this.verifyCode
            }).then((res) => {
                this.$toast(this.$t('修改成功'))
                setTimeout(() => {
                    this.$router.push('/home')
                }, 1000)
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
        async getVerifTarget() {
            Axios.getVerifTarget({

            }).then((res) => {
                this.email_authority = res.data.email_authority
                this.google_auth_bind = res.data.google_auth_bind
                this.phone_authority = res.data.phone_authority
                this.email = res.data.email
                this.phone = res.data.phone
                this.google_auth_secret = res.data.google_auth_secret
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });

        },
        senCode() {
            if (this.type == 1 && !this.phone_authority) {
                this.$toast(this.$t('请绑定手机'));
                return false
            }
            if (this.type == 2 && !this.email_authority) {
                this.$toast(this.$t('请绑定邮箱'));
                return false
            }
            this.onChecked(this.type)
            if (this.time > 0) {
                return false
            }
            ApiLogin.sendVerifyCode({
                target: this.account,
            }).then((res) => {
                this.$toast(this.$t('发送成功'));
                this.time = 30;
                this.timer = setInterval(() => {
                    if (this.time > 0) {
                        this.time = this.time - 1
                    } else {
                        this.time = 0;
                        clearInterval(this.timer)
                    }
                }, 1000);
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        },
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
}
</script>

<style lang="scss" scoped>
.changePassword {
    width: 100%;
    box-sizing: border-box;
}










.line {
    width: 100%;
    height: 2px;

    @include themify() {
        background: themed("tab_background");
    }
}

.content {
    padding: 32px;
    font-size: 26px;
}

.btn {
    @include themify() {
        background: themed("btn_main");
    }

    color: #fff;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    margin-top: 44px;
    border-radius: 10px;
    width: 100%;
    border: none;
}


.iptbox {
    height: 88px;
    margin-top: 16px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;

    input {
        flex: 1;
        height: 100%;
        border: none;
    }

    span {
        color: #1D91FF;
    }
}
</style>
